<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>商品筛选</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .container {
            font-family: 'Microsoft YaHei';
            width: 768px;
            border: 1px solid #ccc;
        }
        
        li {
            border-bottom: 1px dashed #eee;
            font-size: 14px;
            overflow: hidden;
        }
        
        li:last-child {
            border: none;
            padding-bottom: 9px;
        }
        
        li .name {
            float: left;
            width: 100px;
            height: 25px;
            text-align: right;
            padding-top: 12px;
        }
        
        li .intro {
            float: left;
            width: 668px;
            padding-top: 9px;
        }
        
        li .intro a {
            text-decoration: none;
            display: inline-block;
            margin: 3px;
            margin-right: 10px;
        }
        /*选中时的样式*/
        li .intro a.selected,
        li .intro a:hover {
            background-color: #f63;
            color: #fff;
        }
        
        li.choose .intro span {
            border: 1px solid #f63;
            padding: 3px;
            margin-right: 10px;
            cursor: pointer;
            display: none;
        }
        
        li.choose .intro span strong {
            color: #ccc;
        }
        
        li.choose .intro span:hover strong {
            color: #f63;
        }
        
        li.choose .intro a {
            color: #f63;
        }
        li.choose .intro a:hover {
            background-color: #fff;
            color: #f63;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <span class="name">品牌：</span>
                <span class="intro">
                    <a href="javascript:;">苹果</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">联想</a>
                    <a href="javascript:;">中兴</a>
                    <a href="javascript:;">魅族</a>
                    <a href="javascript:;">酷派</a>
                    <a href="javascript:;">苹果</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">联想</a>
                    <a href="javascript:;">中兴</a>
                    <a href="javascript:;">魅族</a>
                    <a href="javascript:;">酷派</a>
                    <a href="javascript:;">苹果</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">联想</a>
                    <a href="javascript:;">中兴</a>
                    <a href="javascript:;">魅族</a>
                    <a href="javascript:;">酷派</a>
                </span>
            </li>
            <li>
                <span class="name">价格：</span>
                <span class="intro">
                    <a href="javascript:;">500元以下</a>
                    <a href="javascript:;">500-1000元</a>
                    <a href="javascript:;">1000-1500元</a>
                    <a href="javascript:;">1500-2000元</a>
                    <a href="javascript:;">2000-3000元</a>
                    <a href="javascript:;">3000-4000元</a>
                    <a href="javascript:;">4000元以上</a>
                </span>
            </li>
            <li>
                <span class="name">主屏尺寸：</span>
                <span class="intro">
                    <a href="javascript:;">6.0英寸以上</a>
                    <a href="javascript:;">5.5-6.0英寸</a>
                    <a href="javascript:;">5.0-5.5英寸</a>
                    <a href="javascript:;">4.5-5.0英寸</a>
                    <a href="javascript:;">4.0-4.5英寸</a>
                    <a href="javascript:;">4.0英寸以下</a>
                </span>
            </li>
            <li>
                <span class="name">网络：</span>
                <span class="intro">
                    <a href="javascript:;">全网通</a>
                    <a href="javascript:;">双4G</a>
                    <a href="javascript:;">移动4G</a>
                    <a href="javascript:;">联通4G</a>
                    <a href="javascript:;">电信4G</a>
                </span>
            </li>
            <li>
                <span class="name">核心数：</span>
                <span class="intro">
                    <a href="javascript:;">十核</a>
                    <a href="javascript:;">八核</a>
                    <a href="javascript:;">双四核</a>
                    <a href="javascript:;">四核</a>
                    <a href="javascript:;">双核及以下</a>
                </span>
            </li>
            <li>
                <span class="name">特性：</span>
                <span class="intro">
                    <a href="javascript:;">大屏幕</a>
                    <a href="javascript:;">双卡双待</a>
                    <a href="javascript:;">指纹识别</a>
                    <a href="javascript:;">千元机</a>
                    <a href="javascript:;">拍照神器</a>
                </span>
            </li>
            <li class="choose">
                <span class="name">您已选择：</span>
                <span class="intro">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    $('li .intro a').click(function () {
        // 给选中的a标签添加selected类名，未选中的移除类名selected
        $(this).addClass('selected').siblings().removeClass('selected');
        // 获取被选中的<a>所在行<li>的索引值
        var li_index = $(this).parents('li').index();
        // 获取选中的内容
        var text = $(this).text() + '<strong> &times; </strong>';
        // 把对应行<li>内的<a>的内容 插入到对应的<span>内
        // 这样写同时解决两个问题：
        // 1.修改选项内容同步
        // 2.
        $('.choose .intro span').eq(li_index).html(text).css('display', 'inline-block');

        // 点击已选择的span关闭
        $('.choose .intro span').click(function () {
            var index = $(this).index();
            // 移除对应行的所有a标签的类名
            $('li').not('.choose').eq(index).find('.intro a').removeClass('selected');
            // 清空选中的span的内容并隐藏
            $(this).empty().css('display', 'none');

            clearAll();
        })

        clearAll();
        function clearAll() {
            $('#clear').remove();
            // 获取已经选中选项的个数(就是span标签不为空的个数)
            var length = $('.choose .intro span').not(':empty').length;
            // console.log(length);
            if (length > 2) {
                var clear = '<a href="javascript:;" id="clear" class="clear">清空</a>'
                $('.choose .intro').append(clear);
                // 点击清空按钮，清除所有选项及样式
                $('.choose .intro #clear').click(function () {
                    // 清空选项
                    $('.choose .intro span').html('').css('display', 'none');
                    // 清空所有a标签的样式
                    $('li').not('.choose').find('.intro a').removeClass('selected');
                    // 移除自身
                    $(this).remove();
                })
            }
        }
    })

</script>